<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<s:url value="/js" id="scriptsUrl" includeParams="none"/>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Album Edit</title>
		<script type="text/javascript" src="${scriptsUrl}/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="${scriptsUrl}/jquery.superflydom-0.9g.min.js"></script>
	</head>
	<body>
		<!-- user login/logout -->
		<s:if test="logged==true">
			<div style="text-align:rigth"><s:property value="loggedUser"/>&nbsp;<a href="logout">Logout</a></div>
			<!-- content -->
			<form action="albumSave" method="POST">
				<table>
					<tr>
						<td>
							<!-- Album -->
							<table>
								<tr>
									<td>Artist:</td>
									<td><input type="text" size="50" name="artist" value="${album.artist}"/></td>
								</tr>
								<tr>
									<td>Title:</td>
									<td><input type="text" size="100" name="title" value="${album.title}"/></td>
								</tr>
								<tr>
									<td>Catalog:</td>
									<td><input type="text" size="20" name="catalog" value="${album.catalog}"/></td>
								</tr>
								<tr>
									<td>Format:</td>
									<td><input type="text" size="20" name="format" value="${album.format}"/></td>
								</tr>
								<tr>
									<td>Released:</td>
									<td><input type="text" size="10" name="released" value="${album.released}"/></td>
								</tr>
								<tr>
									<td>Item:</td>
									<td><input type="text" size="10" name="item" value="${album.item}"/></td>
								</tr>
							</table>
						</td>
					</tr>
					<tr>
						<td>
							<!-- Tracks -->
							<table id="tblTracks">
								<thead>
									<tr style="background-color:grey;">
										<th>Pos</th>
										<th>Title</th>
										<td>Duration</td>
									</tr>
								</thead>
								<tbody>
									<s:iterator value="album.tracks" status="trackStatus">
										<tr>
											<td><input type="text" size="10" name="trackPosition[${trackStatus.index}]" value="${position}"/></td>
											<td><input type="text" size="60" name="trackTitle[${trackStatus.index}]" value="${title}"/></td>
											<td><input type="text" size="10" name="trackDuration[${trackStatus.index}]" value="${duration}"/></td>
										</tr>
									</s:iterator>
								</tbody>
							</table>	
						</td>
					</tr>
					<tr><td><a href="javascript:;" id="lnkAddTrack">[+] add a track</a></td></tr>
					<tr>
						<td>
							<!-- Credits -->
							<table id="tblCredits">
								<thead>
									<tr style="background-color:grey;">
										<th>Role</th>
										<th>Name</th>
										<td>Tracks</td>
									</tr>
								</thead>
								<tbody>
									<s:iterator value="album.credits" status="creditStatus">
										<tr>
											<td><input type="text" size="15" name="creditRole[${creditStatus.index}]" value="${role}"/></td>
											<td><input type="text" size="40" name="creditArtist[${creditStatus.index}]" value="${artist}"/></td>
											<td><input type="text" size="25" name="creditTracks[${creditStatus.index}]" value="${tracks}"/></td>
										</tr>
									</s:iterator>
								</tbody>
							</table>
						</td>
					</tr>
					<tr><td><a href="javascript:;" id="lnkAddCredit">[+] add a credit</a></td></tr>
					<tr><td><input type="submit" name="ok" value="OK"></td></tr>
				</table>
			</form>
		</s:if>
		<s:else>
			<div style="text-align:rigth"><a href="login">Login</a></div>
		</s:else>
		<script type="text/javascript">
var tracks_num = <s:property value="album.tracks.size()"/>;
var credits_num = <s:property value="album.credits.size()"/>;
$(function(){
	$("#lnkAddTrack").click(function(){
		$("#tblTracks tbody").createAppend(
			'tr', {}, [
				'td', {}, [
					'input', {'type':'text', 'size':'10', 'name':'trackPosition['+tracks_num+']', 'value':''}, []
				]
				,'td', {}, [
					'input', {'type':'text', 'size':'60', 'name':'trackTitle['+tracks_num+']', 'value':''}, []
				]
				,'td', {}, [
					'input', {'type':'text', 'size':'10', 'name':'trackDuration['+tracks_num+']', 'value':''}, []
				]
			]
		);
		tracks_num++;
	});
	<s:if test="album.tracks.size()==0">
		$("#lnkAddTrack").click();
	</s:if>

	$("#lnkAddCredit").click(function(){
		$("#tblCredits tbody").createAppend(
			'tr', {}, [
				'td', {}, [
					'input', {'type':'text', 'size':'15', 'name':'creditRole['+credits_num+']', 'value':''}, []
				]
				,'td', {}, [
					'input', {'type':'text', 'size':'40', 'name':'creditArtist['+credits_num+']', 'value':''}, []
				]
				,'td', {}, [
					'input', {'type':'text', 'size':'25', 'name':'creditTracks['+credits_num+']', 'value':''}, []
				]
			]
		);
		credits_num++;
	});
	<s:if test="album.credits.size()==0">
		$("#lnkAddCredit").click();
	</s:if>
});
		</script>
	</body>
</html>